<template>
	<view class="content">
		<view class="info">
			<view class="title">车辆信息</view>
			<view class="item">
				<text class="minititle"> <text class="require">*</text>行驶证主页 </text>
			</view>
			<view class="imgbox">
				<view class="imgitem">
					<image :src="info.driving_license_front" mode="aspectFill" class="img"
						v-if="info.driving_license_front" @tap="preview(info.driving_license_front)"></image>
					<image src="../../static/img/idcard_front.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('car_front')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.driving_license_front"></image>
					<view class="tips" v-if="!info.driving_license_front">上传行驶证</view>
					<uni-icons type="clear" size="30" v-if="info.driving_license_front" class="del"
						@tap="info.driving_license_front=''"></uni-icons>
				</view>
			</view>
			<view class="item">
				<text class="minititle"> <text class="require">*</text>行驶证副页 </text>
			</view>
			<view class="imgbox">
				<view class="imgitem">
					<image :src="info.driving_license_back" mode="aspectFill" class="img"
						v-if="info.driving_license_back" @tap="preview(info.driving_license_back)"></image>
					<image src="../../static/img/idcard_back.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('car_back')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.driving_license_back"></image>
					<view class="tips" v-if="!info.driving_license_back">上传行驶证</view>
					<uni-icons type="clear" size="30" v-if="info.driving_license_back" class="del"
						@tap="info.driving_license_back=''"></uni-icons>
				</view>
			</view>
			<view class="item">
				<text><text class="require">*</text>车辆所有人 </text>
				<input type="text" class="ipt" placeholder="请输入车辆所有人姓名" placeholder-class="input-style"
					v-model="info.car_owner" />
			</view>
			<view class="item">
				<text><text class="require">*</text>车牌号 </text>
				<input type="text" class="ipt" placeholder="请输入车牌号" placeholder-class="input-style"
					v-model="info.car_number" />
			</view>
			<view class="item">
				<text><text class="require">*</text>业户名称 </text>
				<input type="text" class="ipt" placeholder="请输入业户名称" placeholder-class="input-style"
					v-model="info.business_name" />
			</view>
			<view class="item">
				<text><text class="require">*</text>车辆类型 </text>
				<picker mode="selector" :range="typeList" range-key="name" @change="checkType">
					<text v-if="!info.car_type" class="input-style">请选择车辆类型</text>
					<text v-else>{{info.car_type}}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>车辆颜色 </text>
				<picker mode="selector" :range="colorList" range-key="name" @change="checkColor">
					<text v-if="!info.car_color" class="input-style">请选择车辆颜色</text>
					<text v-else>{{info.car_color}}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>车辆能源类型 </text>
				<picker mode="selector" :range="energyList" range-key="name" @change="checkEnergy">
					<text v-if="!info.car_energy_type" class="input-style">请选择车辆能源类型</text>
					<text v-else>{{info.car_energy_type}}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>车辆总重量/kg </text>
				<input type="text" class="ipt" placeholder="请输入车辆总重量/kg" placeholder-class="input-style"
					v-model="info.car_total_weight" />
			</view>
			<view class="item">
				<text><text class="require">*</text>核载重量/kg </text>
				<input type="text" class="ipt" placeholder="请输入核载重量/kg " placeholder-class="input-style"
					v-model="info.car_load_weight" />
			</view>
			<view class="item">
				<text><text class="require">*</text>发证日期 </text>
				<picker mode="date" @change="checksend">
					<text v-if="!info.issue_date" class="input-style">请选择发证日期</text>
					<text v-else>{{info.issue_date}}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>发证机关 </text>
				<input type="text" class="ipt" placeholder="请输入发证机关" placeholder-class="input-style"
					v-model="info.issue_office" />
			</view>
			<view class="item">
				<text><text class="require">*</text>注册日期 </text>
				<picker mode="date" @change="checksign">
					<text v-if="!info.register_date" class="input-style">请选择注册日期</text>
					<text v-else>{{info.register_date}}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>车辆识别代码</text>
				<input type="text" class="ipt" placeholder="请输入车辆识别代码" placeholder-class="input-style"
					v-model="info.car_identification_code" />
			</view>
			<view class="item">
				<text><text class="require">*</text>使用性质 </text>
				<input type="text" class="ipt" placeholder="请输入车辆使用性质" placeholder-class="input-style"
					v-model="info.use_nature" />
			</view>
			<view class="item">
				<text>挂车牌照号 </text>
				<input type="text" class="ipt" placeholder="车型为牵引车类,必填" placeholder-class="input-style"
					v-model="info.trailer_plate_number" />
			</view>
			<view class="item">
				<text>档案编号 </text>
				<input type="text" class="ipt" placeholder="请输入档案编号" placeholder-class="input-style"
					v-model="info.file_number" />
			</view>
		</view>
		<view class="info magt">
			<view class="title">道路运输证</view>
			<view class="item">
				<text><text class="require">*</text>道路运输证号 </text>
				<input type="text" class="ipt" placeholder="请输入道路运输证号" placeholder-class="input-style"
					v-model="info.road_transport_number" />
			</view>
			<view class="item">
				<text><text class="require">*</text>道路运输经营许可证号 </text>
				<input type="text" class="ipt" placeholder="请输入道路运输经营许可证号" placeholder-class="input-style"
					v-model="info.road_transport_business_license_number" />
			</view>
			<view class="item">
				<text><text class="require">*</text>道路运输经营许可证照片 </text>
			</view>
			<view class="imgbox">
				<view class="imgitem">
					<image :src="info.road_transport_business_license_front" mode="aspectFill" class="img"
						v-if="info.road_transport_business_license_front"
						@tap="preview(info.road_transport_business_license_front)"></image>
					<image src="../../static/img/idcard_front.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('transport_front')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.road_transport_business_license_front"></image>
					<view class="tips" v-if="!info.road_transport_business_license_front">上传照片</view>
					<uni-icons type="clear" size="30" v-if="info.road_transport_business_license_front" class="del"
						@tap="info.road_transport_business_license_front=''"></uni-icons>
				</view>
				<view class="imgitem">
					<image :src="info.road_transport_business_license_back" mode="aspectFill" class="img"
						v-if="info.road_transport_business_license_back"
						@tap="preview(info.road_transport_business_license_back)"></image>
					<image src="../../static/img/idcard_back.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('transport_back')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.road_transport_business_license_back"></image>
					<view class="tips" v-if="!info.road_transport_business_license_back">上传照片</view>
					<uni-icons type="clear" size="30" v-if="info.road_transport_business_license_back" class="del"
						@tap="info.road_transport_business_license_back=''"></uni-icons>
				</view>
			</view>
		</view>
		<view class="btnbox">
			<view class="btn" @tap="submit">提交</view>
		</view>
	</view>
</template>
<script setup>
	import {
		saveCarInfo,getCarInfo
	} from '../../network/main.js';
	import uploadUrl from '../../network/utils.js';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const info = reactive({
		driving_license_front: '',
		driving_license_back: '',
		car_owner: '',
		car_number: '',
		business_name: '',
		car_type: '',
		car_color: '',
		car_energy_type: '',
		car_total_weight: '',
		car_load_weight: '',
		issue_date: '',
		issue_office: '',
		register_date: '',
		car_identification_code: '',
		use_nature: '',
		trailer_plate_number: '',
		file_number: '',
		road_transport_number: '',
		road_transport_business_license_number: '',
		road_transport_business_license_front: '',
		road_transport_business_license_back: ''
	})
	const typeList = reactive([{
			name: '挂车'
		},{
			name: '货车'
		}
	])
	const colorList = reactive([
		{
			name: '红色'
		},{
			name: '黑色'
		},{
			name: '黄色'
		},{
			name: '蓝色'
		},{
			name: '绿色'
		}
	])
	const energyList = reactive([
		{
			name: '汽油'
		},{
			name: '柴油'
		},{
			name: '纯电'
		}
	])
	onShow(() => {
       getInfo()
	})
	const getInfo =()=>{
		getCarInfo().then(res=>{
			if (res.data.data) {
				Object.assign(info, res.data.data)
			}
		})
	}
	const checkType = (e) => {
		info.car_type = typeList[e.detail.value].name
	}
	const checkColor = (e) => {
		info.car_color = colorList[e.detail.value].name
	}
	const checkEnergy = (e) => {
		info.car_energy_type = energyList[e.detail.value].name
	}
	const checksend = (e) => {
		info.issue_date = e.detail.value
	}
	const checksign = (e) => {
		info.register_date = e.detail.value
	}
	const chooseImage = (type) => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			success: res => {
				upload(res.tempFilePaths[0], type);
			}
		})
	}
	const preview = (url) => {
		let list = []
		list.push(url)
		uni.previewImage({
			urls: list
		})
	}
	const upload = (url, type) => {		
		uni.uploadFile({
			url: uploadUrl.uploadUrl, 
			filePath: url,
			name: 'file',
			header:{
				'token': uni.getStorageSync('token')
			},
			formData: {
				file:url
			},
			success(response) {
				 let res = JSON.parse(response.data)
				if (type == 'car_front') {
					info.driving_license_front = res.data.fullurl
				} else if (type == 'car_back') {
					info.driving_license_back = res.data.fullurl
				} else if (type == 'transport_front') {
					info.road_transport_business_license_front = res.data.fullurl
				} else if (type == 'transport_back') {
					info.road_transport_business_license_back = res.data.fullurl
				}
			}
		})
	}
	const submit = () => {
		if(info.car_type=='挂车'&&!info.trailer_plate_number){
			uni.showToast({
				title: '请填写挂车牌照号'
			})
			return
		}
		saveCarInfo(info).then(res => {
			uni.showToast({
				title: '保存成功'
			})
			setTimeout(()=>{
				uni.navigateBack({
					delta:1
				})
			},300)
		})
	}
</script>
<style lang="scss">
	.content {
		padding-top: 20rpx;
		padding-bottom: 100rpx;

		.info {
			width: 100%;
			margin: 0 auto;
			padding: 0rpx 40rpx;
			box-sizing: border-box;
			background-color: #fff;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding: 20rpx 0;
			}

			.item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				padding: 20rpx 0;
				border-top: 2rpx solid #f7f7f7;

				.minititle {
					font-size: 24rpx;
					color: #999;
				}

				.ipt {
					text-align: right;
				}
			}

			.imgbox {
				width: 100%;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.imgitem {
					width: 300rpx;
					height: 196rpx;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					justify-content: center;
					align-items: center;
					position: relative;

					.img {
						width: 100%;
						height: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
					}

					.upload {
						width: 60rpx;
						height: 60rpx;
						z-index: 10;
					}

					.tips {
						font-size: 24rpx;
						color: #999;
						z-index: 10;
					}

					.del {
						position: absolute;
						top: 0;
						right: 0;
					}
				}
			}
		}

		.magt {
			margin-top: 20rpx;
		}

		.btnbox {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			.btn {
				width: 600rpx;
				height: 80rpx;
				background-color: #ffc400;
				line-height: 80rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}
</style>